<template>
  <BasicDrawer v-bind="$attrs" title="选择产品" :width="drawerWidth" showFooter @register="registerModal" @ok="handleSubmit"
    @close="handleCancel">
    <BasicTable @register="registerTable"> </BasicTable>
  </BasicDrawer>
</template>

<script setup lang="ts">
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import { BasicTable, useTable } from '@/components/Table';
import { listProduct } from '@/api/product';
import { useMaxWidthOrDefault } from '@/hooks/web/useSize';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'ProductDrawer' });
const emit = defineEmits(['select']);
const [registerTable, { getSelectRows, clearSelectedRowKeys }] = useTable({
  rowSelection: {
    type: 'checkbox'
  },
  title: '产品列表',
  api: listProduct,
  showIndexColumn: false,
  rowKey: 'spuId',
  useSearchForm: false,
  columns: [
    {
      title: '商品编号#',
      dataIndex: 'spuNo',
    },
    {
      title: '商品名称',
      dataIndex: 'spuName',
    },
    {
      title: '价格',
      dataIndex: 'price',
    },
  ],
});
const { createMessage } = useMessage();
const drawerWidth = useMaxWidthOrDefault(700);

const [registerModal, { closeDrawer }] = useDrawerInner();
const handleSubmit = () => {
  const goods = getSelectRows();
  if (goods.length === 0) {
    createMessage.warning('请选择产品');
    return;
  }
  emit('select', goods);
  handleCancel()
}
const handleCancel = () => {
  clearSelectedRowKeys();
  closeDrawer();
}
</script>
